<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <a href="#/home">Home</a>
      </li>
      <li>
        <a href="#/shop/master">Shop</a>
      </li>
      <li>
        <a href="#/cart/a/b/c">Cart</a>
      </li>
    </ul>
    <component :is="currentView"></component>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue';

import Home from './views/Home.vue';
import Shop from './views/Shop.vue';
import Cart from './views/Cart.vue';

const currentPath = ref('')

const routes = {
  '/home': Home,
  '/shop/master': Shop,
  '/cart/a/b/c': Cart
};

onMounted(() => {
  onhashchange = () => {
    currentPath.value = location.hash.slice(1);
  }
});
const currentView = computed(() => {
  return routes[currentPath.value];
})

</script>
<style>
div {
  border: solid;
  padding: 20px;
}
</style>
